import React from 'react';
import TableStore, { ColumnProps } from '../../stores/mobxTable/table';
import { observer } from 'mobx-react';
import { Input } from 'antd';
import jQuery from "jquery";

export interface TableCellProps {
    tableStore: TableStore;
    column: ColumnProps
    randomkey: string;
}

@observer
export default class TableCell extends React.Component<TableCellProps, any> {
    renderEditor = (value: string) => {
        const { column } = this.props;
        if (column.viewAttr == 1) {
            return value
        } else {
            return (
                <Input value={value} autoFocus />
            )
        }
    }
    componentDidMount() {
        jQuery(this.refs._container).closest('td').click(() => {
            const { tableStore, randomkey, column } = this.props;
            tableStore.toEdit(randomkey, column.key);
        })
    }
    render() {
        const { tableStore, randomkey, column } = this.props;
        const form = tableStore.form.$("tableForm");
        const row = form.$(randomkey);
        const field = row.$(column.key);
        const bindObj = field.bind();
        return (
            <span
                ref='_container'
                className="cube-mobx-table-cell"
                style={{ lineHeight: '28px' }}
                {...bindObj}
            >
                {
                    bindObj.editable ? this.renderEditor(bindObj.value) : bindObj.value
                }
            </span>
        )
    }
}
